<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="css/common.css">
	<title>消费记录</title>
    <style>
        body{ width: 100%; margin: 0; padding: 0; font-family: '微软雅黑';}
		body p{color:#949494; font-size:14px; padding-left:10px;}
        input::-ms-input-placeholder{text-align: center;}
		input::-webkit-input-placeholder{text-align: center;}
		.header{ text-align: center;  background-color:#F7F6F4; color:#4D4C4A;border-bottom: 1px solid #4D4C4A;

 width: 100%; height: 40px; line-height: 40px;}
		.h-mid { width:100%; height:40px; float:left; text-align:center; color:#333; font-size:16px; line-height:45px; position:relative;}
		.h-mid span { color:#4D4C4A; font-size:12px;}
		.body{width:100%;}
		.search{border:1px solid #949494; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;margin-top:3%;margin-left:3%;margin-right:3%;text-align:center;height:auto    ;position: relative;}
		.insearch{margin: 0;
			padding: 0;
			list-style-type: none;
		}
		.inss{
			display: block;
			width: 95%;
			height: 15px;
			font-size: 14px;
			line-height: 25px;
			color: #999;
			-webkit-appearance: none;
			-webkit-box-flex: 1;
			-webkit-flex: 1;
			flex: 1;
			border-radius: 0;
			-webkit-rtl-ordering: logical;
			-webkit-user-select: text;
			cursor: auto;
			border: 0;
			padding-top: 10px;
			padding-bottom: 10px;
			padding-left: 10px;
			 -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
		}
		.button{
			position: absolute;
			display: block;
			width: 30px;
			height: 30px;
			right: 2px;
			bottom: 3px;
			border: 0px;
			background:url(images/icon_fdj.png);
			background-repeat:no-repeat;
			background-size:30px;
		}
		.im{float:left;width:10%}
		.list{padding:3%}
		.detail{
			position:relative;
			margin-top:2%;
			padding-right:10px;
			padding-bottom:10px;
			padding-top:25px;
			padding-left:10px;
			border:1px solid #949494;
			 -moz-border-radius:5px;
			 -webkit-border-radius:5px;
			border-radius:5px;
			color:black;
			font-size:12px;
		}
		.date{
			position:absolute;
			top:-10px;
			text-align:center;
			width:79px;
			height:25px;
			line-height:25px;
			border:1px solid #F9BC69; 
			-moz-border-radius:5px; 
			-webkit-border-radius:5px; 
			border-radius:5px;
			background-color:#F9BC69;
			color:#534C44;
			font-size:13px;
		}
		.mingxi{
			position:absolute;
			top:40%;
			left:90%;
			width:10%;
			height:100%;
			background:url(images/arrow_right.png);
			background-repeat:no-repeat;
			background-size:auto;
		}
		.info{
			margin-left:3%;
		}
		.price{
			padding-left:5%;
		}
		.total{
			color:#FBBE65;
			font-size:20px;
		}
		.btn1{margin-top:2%;font-size:14px;text-align:center;line-height:200%}
		.btn2{margin-top:2%;font-size:14px;text-align:center;line-height:200%}
		.clearfix:after {content: " ";display: block;clear: both;height: 0;}
		.clearfix {zoom: 1;}
	</style>
</head>
	
<body>
   <div class="header">
      	<div class="h-mid">
        	<span>消费记录</span>
      	</div>
    </div>
    <div class="body">
        <div class="search clearfix">
            <div class="insearch"><input class="inss" type="text" placeholder="输入完整单号"></div><input class="button" type="button"/>
        </div>
        <div class="title">我的记录（2/2笔）</div>
        <div class="list">
            <div class="record">
              	<div class="detail">
                    <a href="xiaofeimingxi.html">
                        <div class="date">2016-08-06</div>
                        <div class="mingxi"></div>
                        <div class="info">
                            <span>交易单号：</span><span>000ZH002000ZH0021201607140033</span><br>
                            <span>店铺名称：</span><span>cathytest</span><br>
                            <span>店铺电话：</span><span>13500010010</span><span class="price">交易金额：</span><span class="total">235.00</span>
                        </div>
                    </a>
                </div>
                <a href="order_evaluate.html"><div class="btn1">发表评论</div></a>
                <div class="bar"></div>
            </div>
            <div class="record">
              	<div class="detail">
                    <a href="xiaofeimingxi.html">
                        <div class="date">2016-08-06</div>
                        <div class="mingxi"></div>
                        <div class="info">
                            <span>交易单号：</span><span>000ZH002000ZH0021201607140033</span><br>
                            <span>店铺名称：</span><span>cathytest</span><br>
                            <span>店铺电话：</span><span>13500010010</span><span class="price">交易金额：</span><span class="total">198.00</span>
                        </div>
                    </a>
                </div>
                <div class="btn2">已评分<span>95</span>分</div>
                <div class="bar"></div>
            </div>
        </div>
    </div>
</body>
</html>
